<template>
  <div class="c">
    <el-form :model="loginData" label-width="120px">
      <el-form-item label="手机号: " prop="username">
        <el-input v-model="username" />
      </el-form-item>
      <el-form-item label="密码: " prop="password">
        <el-input v-model="password" />
      </el-form-item>
      <div class="d">
        <p class="e" @click="forgetPassword">忘记密码</p>
        <el-button type="primary" class="btn2" @click="login">登录</el-button>
        <el-button type="primary" class="btn2" @click="register">注册</el-button>
      </div>
    </el-form>
</div>
  
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
      const loginData = reactive({
          username: '12345678901',
          password: '123'
      })
      return {
        ...toRefs(loginData)
      }
    },
    data() {
      return {
        user: {
          id: '123'
        }
      }
    },
    methods: {
      // 登录
      login() {
        var _this = this
          this.$axios
              .post('user/login',{
                  "phoneNumber": this.username,
                  "password": this.password
              }).then(response=> {
                  if(response.data.result.code == "200"){
                      this.$message.success('登录成功!')
                      localStorage.setItem("token",response.data.token)
                      if(response.data.role == "student" ){
                        this.$router.push({
                          path: '/student/mainpage',
                          name:  "StudentMainpage",
                          params: {
                            userId: this.user.id
                          },
                          query: {
                            demo: 'a'
                          }
                        })
                      }
                      else if(response.data.role == "teacher" ){
                        this.$router.push({
                          path: '/teacher/mainpage',
                          name:  "TeacherMainpage",
                          params: {
                            userId: this.user.id
                          },
                          query: {
                            demo: 'a'
                          }
                        })
                      }
                      else if(response.data.role == "administractor" ){
                        this.$router.push({
                          path: '/administractor/mainpage',
                          name:  "AdministractorMainpage",
                          params: {
                            userId: this.user.id
                          },
                          query: {
                            demo: 'a'
                          }
                        })
                      }
                      else console.log("身份异常")
                  }
                  else
                      this.$message.error('登录失败!')

                  console.log(response)
                      
              })
              .catch(function (error){
                  let stateInfo = error.response.headers["state"]
                  if(stateInfo!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateInfo))
                  }
                  console.log(error)
              })
              .then(function (){
                  console.log("测试成功")
              })
          
      },
      // 注册
      register() {
          this.$router.push('/register')
      },
      // 忘记密码
      forgetPassword() {
          this.$router.push('/forgetpassword')
      }
    }
}
</script>

<style scoped>
.a {
  height: 100%;
  width: 100%;
  display: block;
  /* background-image: url(); */
  background-color: beige;
  box-sizing: border-box;
}

.b {
  height: 10%;
  width: 100%;
  background-color: gray;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url("../../assets/login2.jpg");
  background-size: cover;
  opacity: 50%;
  box-sizing: border-box;
}


.c {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #9ACD32
}

.d {
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items:flex-end;
  margin-top: 40px;
  box-sizing: border-box;
}

.e {
  font-size: 0.8em;
  color: red;
  margin-right: 40px;
  text-decoration:underline;
  cursor: pointer;
  box-sizing: border-box;
}

.btn {
    /* em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
    vh就是当前屏幕可见高度的1%
    vw就是当前屏幕宽度的1% */
    height: 3em;
    width: 6em;
    font-size: 1em;
    margin-right: 20px;
}

.btn2 {
    /* em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
    vh就是当前屏幕可见高度的1%
    vw就是当前屏幕宽度的1% */
    /* height: 3em;
    width: 6em;
    font-size: 1em; */
}

.loginForm {
  height: 50%;
  width: 30%;
  display: flex;
  background-color: aquamarine;
  box-sizing: border-box;
}


</style>